<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../resources/css/application.css" rel="stylesheet" type="text/css" />
<style>
.sidebar {
	width:200px;
	float:left;
	padding:20px;
}
.text-content {
	margin-left:240px;
}
.nav-menu a {
	display:block;
	padding:5px;
	margin-bottom:1px;
	color:#999999;
}
.nav-menu a:hover {
	background-color:#333;
	color:#FFF;
}
.nav-menu a.active {
	background:#0099cc;
	text-decoration: none;
	font-weight:bold;
	color:#FFFFFF;
}
#appWrapper {
	top:10px;
}
</style>
<title>Visual HUD / Help</title>
</head>

<body>
<div id="appWrapper">
	<div class="app-header">
		<h1 class="logo"><span>Quake Live Visual HUD</span></h1>
		<div class="app-global-actions"><a href="/">Online HUD generator</a></div>
		<img src="../resources/images/ql_logo.png" class="ql-logo" width="42" height="42" /> </div>
	<div class="clearfloat" id="siteContent">
		<div class="sidebar">
			<ul class="nav-menu">
				<li><a href="newfeatures.html">What's new</a></li>
				<li><a href="." class="active">Basics</a></li>
				<li><a href="import.html">Import and edit your HUD</a></li>
				<li><a href="#hotkeys.html">Hotkeys</a></li>
				<li><a href="videos.html">Video tutorials</a></li>
			</ul>
		</div>
		<div class="text-content p-20">
			<h2>Adding elements to the HUD</h2>
			<div class="mb-10"> <img src="../resources/images/faq/drag_drop_illustration.png" /> </div>
			<ol>
				<li> <strong>Drag and  drop</strong><br />
					Simply select item from library and drop it right on your HUD. </li>
				<li> <strong>Double  click</strong><br />
					Double click on library item will inject new element right to the center of  your HUD. </li>
			</ol>
			<br />
			<br />
			<h2>Selecting HUD elements</h2>
			<div class="mb-10"> <img src="../resources/images/faq/select_element.png" /> </div>
			<p>Click any HUD element to select  it.  You should see dotted border around  selected items, also there are properties form should appear on the right.<br />
				Also you can select multiple HUD  items by using SHIFT+CLICK.</p>
			<br />
			<br />
			<h2>Moving HUD elements</h2>
			<div class="mb-10"> <img src="../resources/images/faq/move_it.png" /> </div>
			<ol>
				<li><strong>Using  mouse</strong><br />
					You can change element position using drag and drop. Simply drag items  around the HUD to change it's placement</li>
				<li><strong>Using  keyboard</strong><br />
					Use arrow keys to move selected item(s). By default each key press will  move item by 1 pixel. You can hold down SHIFT key in order to move item by 10  pixels </li>
			</ol>
			<br />
			<br />
			<h2>Aligning HUD elements</h2>
			<div class="mb-10"> <img src="../resources/images/icons/align_icons_sprite.png" /> </div>
			<p>When single HUD item is selected you can  align it  to one edge of a HUD (top,  left, right, bottom and both centers).   Multiple items aligned by specified edges relatively to the first item  selected.</p>
			<br />
			<br />
			<h2>Deleting HUD elements</h2>
			<div class="mb-10"> <img src="../resources/images/faq/delete_key.png" class="v-middle mr-20" /><img src="../resources/images/btn_ico_trash.png" class="v-middle mr-20" />
				<button value="Delete selected items" class="button-main button-small button-main"><span class="w-icon trash">Delete selected items</span></button>
			</div>
			<p> When single HUD item is selected you can  delete it by clicking trash icon located bottom left.  Multiple items can be deleted with [Delete selected items] button.<br />
				Also you can simply press DELETE key to delete selected item(s); </p>
		</div>
	</div>
	<div class="app-footer">
		<div class="clearfloat">
			<div class="f-left w-50">
				QUAKE LIVE, QUAKE and ID are trademarks or registered trademarks of Id Software LLC in the United States and/or other countries.
			</div>
			<div class="a-right w-50 clear-right">
				<span class="v-middle d-iblock mr-10">
					<a href="credits.html">Made by Pavel Kiselyov</a><br />
					&copy; 2010 All rights reserved
				</span>
				
				<img src="/resources/images/pk69logo.png" width="32" height="32" class="v-middle" />				
			</div>
		</div>		
	</div>	
</div>
<script>
</script>
</body>
</html>
